import * as React from "react"
import Layout from "../components/Layout"
import Seo from "../components/Seo"
import { PageProps, graphql } from "gatsby"
import type { BlogDetail } from '../types/blog'
import FixedContent from "../components/FixedContent"
import PageSection from "../components/PageSection"
import { Breadcrumb } from 'antd';
 
type DataProps = {
  markdownRemark: BlogDetail
}

const Blog: React.FC<PageProps<DataProps>> = ({ data }) => {
  const post = data.markdownRemark
  return (
    <Layout>
      <Seo title="post" />
      <FixedContent>
        <Breadcrumb className="breadcrumb">
          <Breadcrumb.Item href="/">首页</Breadcrumb.Item>
          <Breadcrumb.Item>{post.frontmatter.title}</Breadcrumb.Item>
        </Breadcrumb>
        <PageSection>
          <h1>{post.frontmatter.title}</h1>
          <p>{post.frontmatter.date}</p>
          <p>{post.frontmatter.description}</p>
          <div dangerouslySetInnerHTML={{ __html: post.html }} />
        </PageSection>
      </FixedContent>
    </Layout>
  )
}

export default Blog

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      id
      fields {
        slug
      }
      frontmatter {
        date(formatString: "YYYY-MM-DD", locale: "zh-CN")
        description
        title
      }
    }
  }
`